<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Progress</title>
<jsp:include page="/detectBrowser.jsp" />	
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="highcharts.js"></script>
	<script type="text/javascript" src="gray.js"></script>
	<%@page import="b1w1nn1ng.crossf1t.gui.*, b1w1nn1ng.crossf1t.business.*, java.util.*, b1w1nn1ng.crossf1t.db.*"%>
</head>
<body>
<div id="container">
<jsp:include page="/navbar.jsp" />	
<h1> Progress </h1> <hr />
 <% //this is a convienience variable: If it is true, then we have sufficient information to show a graph
    boolean ready = false; 
	User user = (User) session.getAttribute("user");
	session.setAttribute("user", user);
  	%>
		Select a workout type:
		<form action="./progress.jsp" method="get" id = "myForm">
		<select name="primary" onchange="this.form.submit();" class="selects"> 
			<% 
			//get the different values and add them as select options
			String[] primaries = Database.getPrimarySeeList(false);
			
			//Print the "Categories" option at the top of the menu if we haven't selected one yet
			if(request.getParameter("primary") == null) {
				out.println("<option>Categories</option>");
			}
			
			//for each entry in the string array, prints it as an option in format:
			// <option value="entry">entry</option>
			for(String entry:primaries) {
				
				// If an option was selected last time, we do this check to keep it selected:
				if(request.getParameter("primary") != null) {
					if(request.getParameter("primary").equals(entry))
						out.println("<option selected value=\""+entry+"\">"+entry+"</option>");
					else
						out.println("<option value=\""+entry+"\">"+entry+"</option>");
				// Else, just print the options
				} else {
					out.println("<option value=\""+entry+"\">"+entry+"</option>");
				}
			}
			%>
		</select>
		<%
		
		// If a primary category was selected, we may have to display the secondary menu. Check
		// if we have to here:
		if(request.getParameter("primary") != null) {
			String[] secondary = Database.getSecondarySeeList(request.getParameter("primary"));
			
			//if the secondary seeList is null, we're done, there is no secondary.
			if(secondary == null) {
				ready = true;
			} else {
				//else, there is a secondary: here's the select menu for it.
				out.println("<select class=\"selects\" name=\"secondary\" onchange=\"this.form.submit();\">");
				//Print the "Excercise" option at the top of the menu if we haven't selected one yet
				//OR if primary changed since last time.
				if(request.getParameter("secondary") == null) {
					out.println("<option>Excercise</option>");
					ready = false;
				} else {
					boolean found = false;
					//check if primary changed by seeing if selected secondary is in the list still
					for(int i = 0; i < secondary.length; i++) {
						if(secondary[i].equals(request.getParameter("secondary"))) {
							found = true;
							ready = true;
							break;
						}
					}
					if(!found) {
						out.println("<option>Excercise</option>");
						ready = false;
					}
				}
				
				//for each entry in the string array, prints it as an option in format:
				// <option value="entry">entry</option>
				for(String entry:secondary) {
					
					// If an option was selected last time, we do this check to keep it selected:
					if(request.getParameter("secondary") != null) {
						if(request.getParameter("secondary").equals(entry))
							out.println("<option selected value=\""+entry+"\">"+entry+"</option>");
						else
							out.println("<option value=\""+entry+"\">"+entry+"</option>");
					// Else, just print the options
					} else {
						out.println("<option value=\""+entry+"\">"+entry+"</option>");
					}
				}
				out.println("</select>");
			}
		}
		%>	
		</form>	
	<br>
<div id ="container2" style="width: 350px; height: 200px; margin: 0 auto"></div>
	<table class="icongrid">
		<tr>
			<td><a href="goals.jsp"><img src="/crossfit/img/blackbutton_progress_goals.png" alt="Workouts" />
			</a>
			</td>
			<td><a href="leaderboard.jsp"><img src="/crossfit/img/blackbutton_progress_leaderboard.png" alt="Friends" />
			</a>
			</td>
			<td><a href="benchmarks.jsp"><img src="/crossfit/img/blackbutton_progress_benchmarks.png"  alt="Progress" />
			</a>
			</td>
		</tr>
		<tr>
			<td>Goals</td>
			<td>Leaderboard</td>
			<td>Benchmarks</td>
		</tr>
	</table>
	</div>
</body>
<script language ='JavaScript' TYPE="text/javascript">
	var chart;
	var graph= <%=ready%>;
	if(graph){
	var options = {
		chart: {
			renderTo: 'container2',
			defaultSeriesType: 'line'
			},
		title: {
			text: 'Weight'
			},
		subtitle: {
			text: 'How Fat You Are'
			},
		xAxis: {
			categories:[0],
			title:{
				text: 'Day'
			},
	},
		yAxis: {
			title: {
				text: 'Weight(lbs)'
				}
			},
		tooltip: {
			enabled: false,
			formatter: function() {
			return '<b>'+ this.series.name +'</b><br/>'+
								this.x +': '+ this.y +'°C';
			}
			},
		plotOptions: {
			line: {
			  dataLabels: {
			    enabled: true
				      },
			  enableMouseTracking: false
			       }
			},
		series: [{
			name: '<%=user.getFirstName()%>',
			data: [150.75,150.50,149.6,120.3]
			}]
	}
	chart = new Highcharts.Chart(options);
	//alert(nothing);

}
	</script>	
</html>